<template>
    <div class="sort">
        <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <!-- 分类 -->
                <div class="sort-one">
                    <!-- 添加按钮 -->
                    <el-row class="sort-one-head">
                        <el-col :span="6">
                            <div class="sort-one-name">分类</div>
                        </el-col>
                        <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" class="sort-one-add">
                            <el-button type="primary" class="sort-one-add-submit" size="small" @click="addOneSort">
                                添加</el-button>
                        </el-col>
                    </el-row>
                    <!-- 分类列表 -->
                    <el-row class="sort-one-list">
                        <el-col :span="24">
                            <el-table :data="tableData" border style="width: 100%">
                                <el-table-column type="index" label="序" :index="indexMethodOne" width="50">
                                </el-table-column>
                                <el-table-column prop="plateName" label="分类名称">
                                </el-table-column>
                                <el-table-column prop="plateDescription" label="分类描述">
                                </el-table-column>
                                <el-table-column prop="address" label="操作">
                                    <template slot-scope="scope">
                                        <el-button type="primary" icon="el-icon-edit" circle size="small"
                                            @click="gotoDetail(scope.row)"></el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-col>
                    </el-row>
                    <!-- 分页 -->
                    <el-row class="sort-one-page">
                        <el-col :span="24" class="sort-one-page-line">
                            <el-pagination :page-size="onePageSize" :current-page="onePageNum"
                                @current-change="onehandleCurrent" class="article_pagination" background
                                layout="prev, pager, next" :total="oneTotalSize"></el-pagination>

                        </el-col>
                    </el-row>
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <!-- 二级分类 -->
                <div class="sort-one">
                    <!-- 添加按钮 -->
                    <el-row class="sort-one-head">
                        <el-col :span="6">
                            <div class="sort-one-name">标签</div>
                        </el-col>
                        <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" class="sort-one-add">
                            <el-button type="primary" class="sort-one-add-submit" size="small" @click="addTwoSort">
                                添加</el-button>
                        </el-col>
                    </el-row>
                    <!-- 二级分类列表 -->
                    <el-row class="sort-one-list">
                        <el-col :span="24">
                            <el-table :data="tableDataTwo" border style="width: 100%">
                                <el-table-column type="index" label="序" :index="indexMethodTwo" width="50">
                                </el-table-column>
                                <el-table-column prop="classifyName" label="所属分类">
                                </el-table-column>
                                <el-table-column prop="tagName" label="标签名称">
                                </el-table-column>
                                <el-table-column prop="address" label="操作">
                                    <template slot-scope="scope">
                                        <el-button type="primary" icon="el-icon-edit" circle size="small"
                                            @click="gotoTagDetail(scope.row)"></el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-col>
                    </el-row>
                    <!-- 分页 -->
                    <el-row class="sort-one-page">
                        <el-col :span="24" class="sort-one-page-line">
                            <el-pagination :page-size="twoPageSize" :current-page="twoPageNum"
                                @current-change="twohandleCurrent" class="article_pagination" background
                                layout="prev, pager, next" :total="twoTotalSize"></el-pagination>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
        </el-row>
        <!-- 分类弹出层 -->
        <el-dialog title="添加分类" :visible.sync="oneSortShow">
            <el-form :model="oneSortForm" :rules="oneSortRules" ref="oneSortForm">
                <el-form-item label="分类名称" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="oneSortForm.plateName" autocomplete="off" placeholder="请输入内容"></el-input>
                </el-form-item>
                <el-form-item label="分类描述" :label-width="formLabelWidth" prop="name">
                    <el-input type="textarea" :rows="2" v-model="oneSortForm.plateDescription"
                        placeholder="请输入内容"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="oneSortSUbmit('oneSortForm')">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 标签弹出层 -->
        <el-dialog title="添加标签" :visible.sync="twoSortShow">
            <el-form :model="twoSortForm" :rules="twoSortRules" ref="twoSortForm">
                <el-form-item label="所属分类" :label-width="formLabelWidth" prop="classifyId">
                    <el-select v-model="twoSortForm.classifyId" placeholder="请选择所属分类">
                        <el-option v-for="item in classifyList" :key="item.classifyId" :label="item.classifyName"
                            :value="item.classifyId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="标签名称" :label-width="formLabelWidth" prop="tagName">
                    <el-input v-model="twoSortForm.tagName" autocomplete="off" placeholder="请输入"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="twoSortSUbmit('twoSortForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { add, list, edit } from '@/assets/api/technology.js'
import { selectTagList, selectClassifyList, insertTag, selectPageTags } from '@/assets/api/classifyTag.js';
export default {
    data() {
        return {
            tableData: [],
            tableDataTwo: [],
            // 一级分类
            oneSortShow: false,
            oneSortForm: {
                plateId: '',
                plateName: '',
                plateDescription: '',
                type: 0
            },
            oneSortRules: {
                plateName: [
                    { required: true, message: '请输入分类名称', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                ]
            },
            onePageSize: 10,
            onePageNum: 1,
            oneTotalSize: 0,

            formLabelWidth: '120px',
            // 二级分类
            twoSortShow: false,
            twoSortForm: {
                tagId: '',
                tagName: '',
                classifyId: ''
            },
            classifyList: [],
            twoSortRules: {
                tagName: [
                    { required: true, message: '请输入标签名称', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                ],
                classifyId: [
                    { required: true, message: '请选择分类名称', trigger: 'change' }
                ]
            },
            twoPageSize: 10,
            twoPageNum: 1,
            twoTotalSize: 0,
        }
    },

    created() {
        this.selectClassifyList();
        this.selectTagList();
    },
    methods: {
        addOneSort() {
            this.oneSortShow = true
        },
        addTwoSort() {
            this.twoSortShow = true
            var val = 1
            selectClassifyList(val).then((resp) => {
                this.classifyList = resp.data || []
            })
        },
        oneSortSUbmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.oneSortForm.type = 1
                    if (this.oneSortForm.plateId != '') {
                        edit(this.oneSortForm).then((resp) => {
                            if (resp.data) {
                                this.$message.success("保存成功");
                                this.oneSortShow = false;
                                //刷新分类页
                                this.selectClassifyList()
                            } else {
                                this.$message.error(resp.message);
                            }
                        })
                    } else {
                        add(this.oneSortForm).then((resp) => {

                            if (resp.data) {
                                this.$message.success("保存成功");
                                this.oneSortShow = false;
                                //刷新分类页
                                this.selectClassifyList()
                            } else {
                                this.$message.error(resp.message);
                            }
                        })
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        twoSortSUbmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    insertTag(this.twoSortForm).then((resp) => {
                        if (resp.data) {
                            this.$message.success("保存成功");
                            this.twoSortShow = false;
                            this.selectTagList();
                        } else {
                            this.$message.error(resp.message);
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //分类列表查询
        async selectClassifyList() {
            let value = { "pageNum": this.onePageNum, "pageSize": this.onePageSize, "plateType": 1 }
            list(value).then((resp) => {

                this.tableData = resp.data.content;
                this.oneTotalSize = resp.data.totalSize;
            })
        },

        async onehandleCurrent(val) {
            let value = { "pageNum": val, "pageSize": this.onePageSize, "plateType": 1 }
            list(value).then((resp) => {
                this.tableData = resp.data.content;
                this.oneTotalSize = resp.data.totalSize;
            })
        },

        async selectTagList() {
            let value = { "pageNum": this.twoPageNum, "pageSize": this.twoPageSize }
            selectPageTags(value).then((resp) => {
                this.tableDataTwo = resp.data.content;
                this.twoTotalSize = resp.data.totalSize;
            })
        },

        async twohandleCurrent(val) {
            let value = { "pageNum": val, "pageSize": this.twoPageSize, "plateType": 1 }
            selectPageTags(value).then((resp) => {
                this.tableDataTwo = resp.data.content;
                this.twoTotalSize = resp.data.totalSize;
            })
        },

        async gotoDetail(data) {
            console.log(data)
            this.oneSortShow = true
            this.oneSortForm = data;
        },

        async gotoTagDetail(data) {
            var val = 1
            selectClassifyList(val).then((resp) => {
                this.classifyList = resp.data || []
            })
            this.twoSortShow = true
            this.twoSortForm = data;
        },
        indexMethodOne(index) {
            return index + 1;
        },
        indexMethodTwo(index) {
            return index + 1;
        }
    }
}
</script>

<style scoped>
.sort {
    width: 100%;
    min-height: 100%;
    padding: 15px;
    box-sizing: border-box;
}

/* 一级分类 */
.sort-one {
    width: 100%;
    height: auto;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid #eeeeee;
}

.sort-one-name {
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding-left: 20px;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 2px
}

.sort-one-add {
    display: flex;
    height: 50px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.sort-one-add-submit {
    width: 100%;
}

.sort-one-head {
    width: 100%;
    margin-bottom: 15px;
}

.sort-one-list {
    width: 100%;
    margin-bottom: 20px;
}

.sort-one-page-line {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
</style>